import { PlusOutlined } from "@ant-design/icons";
import {
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from "@ant-design/pro-components";
import { Button, message } from "antd";

import React, { useState } from "react";

interface FormValues {
  name: string;
  type: string;
  description?: string;
}

const ModalFormPage: React.FC = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const handleSubmit = async (values: FormValues) => {
    console.log("提交数据:", values);
    message.success("创建成功！");
    setModalVisible(false);
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>模态框表单</h1>
      <Button
        type="primary"
        icon={<PlusOutlined />}
        onClick={() => setModalVisible(true)}
      >
        创建项目
      </Button>

      <ModalForm
        title="创建新项目"
        open={modalVisible}
        onOpenChange={setModalVisible}
        onFinish={handleSubmit}
        modalProps={{
          destroyOnClose: true,
        }}
      >
        <ProFormText
          name="name"
          label="项目名称"
          placeholder="请输入项目名称"
          rules={[{ required: true, message: "请输入项目名称" }]}
        />
        <ProFormSelect
          name="type"
          label="项目类型"
          options={[
            { label: "Web应用", value: "web" },
            { label: "移动应用", value: "mobile" },
            { label: "桌面应用", value: "desktop" },
          ]}
          placeholder="请选择项目类型"
          rules={[{ required: true, message: "请选择项目类型" }]}
        />
        <ProFormTextArea
          name="description"
          label="项目描述"
          placeholder="请输入项目描述"
          rows={4}
        />
      </ModalForm>
    </div>
  );
};

export default ModalFormPage;
